<template>
	<el-popover placement="top" width="650" v-model="visible" popper-class="upgrade-popover">
		<el-tabs v-model="activeTab">
			<el-tab-pane label="升级为服务" name="service">
				<service-list
					ref="serviceList"
					v-model="selectServiceList"
					upgrade
					:biz_id="biz_id"
					@cancel="cancel"
					@confirm="confirm"
				/>
			</el-tab-pane>
			<el-tab-pane label="升级为卡项" name="servicecard">
				<servicecard-list
					ref="servicecardList"
					v-model="selectServiceList"
					upgrade
					:biz_id="biz_id"
					@cancel="cancel"
					@confirm="confirm"
				/>
			</el-tab-pane>
		</el-tabs>

		<el-button slot="reference" type="primary" :disabled="disabled" @click="openPopover">
			升级
		</el-button>
	</el-popover>
</template>
<script>
import ServiceList from "../service-list";
import ServicecardList from "../servicecard-list";
export default {
	name: "cl-choice-upgrade",
	props: {
		// 选中的列表
		value: {
			type: Array,
			default: () => []
		},
		biz_id: {
			type: [Number, String],
			default: ""
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	components: {
		ServiceList,
		ServicecardList
	},
	data() {
		return {
			visible: false,
			activeTab: "service",
			selectServiceList: [],
			selectServicecardList: []
		};
	},
	watch: {
		visible(v) {
			console.log(v);
		}
	},
	methods: {
		openPopover() {
			this.activeTab = "service";
			this.selectServiceList = [...this.value];
			this.selectServicecardList = [...this.value];
			this.$nextTick(() => {
				this.$refs.serviceList.init();
				this.$refs.servicecardList.init();
			});
		},
		cancel() {
			this.visible = false;
			this.$emit("cancel");
		},
		confirm(v) {
			this.activeTab == "service" && (this.selectServiceList = v);
			this.activeTab == "servicecard" && (this.servicecardList = v);
			this.cancel();
			// this.$emit("input", this.selectServiceList);
			this.$emit("confirm", v);
		}
	}
};
</script>
<style lang="scss">
.upgrade-popover {
	padding: 0;
}
</style>
<style lang="scss" scoped>
::v-deep {
	.el-popover {
		padding: 0;
	}
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__nav-scroll {
		display: flex;
		justify-content: center;
	}
	.el-tabs__nav-wrap::after {
		height: 1px;
	}
}
</style>
